<template>
	<view class="agreement-container">
		<!-- 顶部标题栏 -->
		<!-- 		<view class="agreement-header">
			 <image src="/static/logo.png" class="logo" />
			<text class="title">螃蟹旅途钱包用户协议</text>
		</view> -->

		<!-- 协议内容 -->
		<view scroll-y class="agreement-content">
			<rich-text :nodes="agreementContent"></rich-text>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				agreed: false,
				agreementContent: `
<div style="font-size: 28rpx; color: #333; line-height: 1.6;">
  <h3 style="text-align: center; margin-bottom: 30rpx; font-size: 32rpx; color: #ff8c00;">用户服务协议</h3>

  <p>欢迎使用<strong style="color: #ff8c00;">螃蟹旅途钱包</strong>！请您务必在使用前仔细阅读本服务协议。</p>

  <h3 style="margin: 40rpx 0 20rpx; font-size: 30rpx; color: #ff8c00;">一、协议范围</h3>
  <p>1. 本协议是您与<strong>螃蟹旅途钱包</strong>之间关于使用本服务所达成的协议。</p>
  <p>2. 使用本服务即表示您同意遵守本协议及相关政策。</p>

  <h3 style="margin: 40rpx 0 20rpx; font-size: 30rpx; color: #ff8c00;">二、服务内容</h3>
  <p>我们提供包括但不限于以下功能：</p>
  <ul style="padding-left: 40rpx; margin-bottom: 20rpx;">
    <li>账户注册及登录</li>
    <li>电子钱包充值、支付、提现</li>
    <li>消费记录及账单管理</li>
    <li>积分及会员优惠</li>
  </ul>

  <h3 style="margin: 40rpx 0 20rpx; font-size: 30rpx; color: #ff8c00;">三、用户义务</h3>
  <p>使用服务时，您需遵守国家法律法规，不得从事以下行为：</p>
  <ul style="padding-left: 40rpx; margin-bottom: 20rpx;">
    <li>发布违法、虚假或不良信息</li>
    <li>侵犯他人合法权益</li>
    <li>破坏服务正常运行</li>
    <li>进行违法交易或洗钱行为</li>
  </ul>

  <h3 style="margin: 40rpx 0 20rpx; font-size: 30rpx; color: #ff8c00;">四、账户安全</h3>
  <p>您应妥善保管账户及密码信息。因个人保管不善导致的损失由用户自行承担。</p>

  <h3 style="margin: 40rpx 0 20rpx; font-size: 30rpx; color: #ff8c00;">五、服务变更与终止</h3>
  <p>我们可能根据业务调整对服务内容进行变更或中止，届时会提前公告通知用户。</p>

  <h3 style="margin: 40rpx 0 20rpx; font-size: 30rpx; color: #ff8c00;">六、免责声明</h3>
  <p>因不可抗力或不可预见的原因造成服务中断、数据丢失等，我们不承担责任。</p>

  <h3 style="margin: 40rpx 0 20rpx; font-size: 30rpx; color: #ff8c00;">七、适用法律</h3>
  <p>本协议适用中华人民共和国法律。如发生争议，应提交公司所在地法院诉讼解决。</p>

  <h3 style="margin: 40rpx 0 20rpx; font-size: 30rpx; color: #ff8c00;">八、联系方式</h3>
  <p>客服邮箱：service@pangxielvtu.com</p>
  <p>客服电话：400-888-9999</p>
  <p>服务时间：9:00-18:00（工作日）</p>

  <p style="margin-top: 40rpx; text-align: center; font-weight: bold; color: #ff8c00;">
    螃蟹旅途钱包（广州）科技有限公司<br>
    2025年6月
  </p>
</div>

      `
			};
		},
		methods: {
			navigateToPrivacy() {
				uni.navigateTo({
					url: '/pages/privacy/privacy'
				});
			}
		}
	};
</script>

<style lang="scss">
	.agreement-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #fff;
	}

	.agreement-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 0 20rpx;
		background-color: #fff;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		.logo {
			width: 120rpx;
			height: 120rpx;
			border-radius: 24rpx;
			margin-bottom: 20rpx;
		}

		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
	}

	.agreement-content {
		box-sizing: border-box;
		flex: 1;
		padding: 0 30rpx;
		background-color: #f9f9f9;
		border-radius: 24rpx 24rpx 0 0;
		padding-bottom: 50rpx;
		// margin: 0 30rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05) inset;
	}

	.agreement-footer {
		padding: 30rpx;
		background-color: #fff;
		border-top: 1rpx solid #eee;

		.checkbox-container {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			.agree-text {
				font-size: 28rpx;
				color: #666;
				margin-left: 15rpx;
			}
		}

		.agree-btn {
			background: linear-gradient(135deg, #ff8c00, #ff6b00);
			color: white;
			border-radius: 50rpx;
			font-size: 32rpx;
			height: 90rpx;
			line-height: 90rpx;
			box-shadow: 0 6rpx 20rpx rgba(255, 140, 0, 0.3);

			&.disabled {
				background: #ccc;
				box-shadow: none;
			}
		}
	}
</style>